<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>欢迎页</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/backStyle.css">
<script type="text/javascript">
$(document).ready(function() {
	/* 获取数据源并初始化后台统计1 */
	$.ajax({
		url : "backWelcome.action",
		type : "post",
		dataType : "json",
		success : function(data) {
			var datas = JSON.parse(data);
			$("#userSize").html(datas.userSize);
			$("#pendingOrders").html(datas.pendingOrders);
			$("#completedOrders").html(datas.completedOrders);
			$("#completedMoney").html("￥"+datas.completedMoney);
		}
	});
	$.ajax({
		url : "welcomeLine.action",
		type : "post",
		dataType : "json",
		success:function(data) {
			var datas = JSON.parse(data);
			var dataList = datas.dataList;
			var dateList = datas.dateList;
			var myChart = echarts.init(document.getElementById('line'));
			var option = {
				    title: {
				        text: '过去一周成交量'
				    },
				    tooltip : {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'cross',
				            label: {
				                backgroundColor: '#6a7985'
				            }
				        }
				    },
				    legend: {
				        data:['成交数']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis : [
				        {
				            type : 'category',
				            boundaryGap : false,
				            data : dateList
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'成交数',
				            type:'line',
				            stack: '总量',
				            areaStyle: {normal: {}},
				            data: dataList
				        }
				    ]
				};
				//使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
		}
	});
});
</script>
<style type="text/css">
body {
	overflow-y: auto;
}
.block {
	border: 1px solid #ccc;
	background: white;
	margin: 1em 1em 0em 1em;
}

.block-heading {
	border-bottom: 1px solid #a6a6a6;
	border-left: none;
	text-shadow: none;
	text-transform: none;
	font-weight: bold;
	font-size: .85em;
	line-height: 3em;
	display: block;
	padding-left: 1em;
	border-top: 1px solid #fff;
	outline: none;
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dddddd),
		color-stop(1, #fafafa));
	color: #505050;
}

.block-body.collapse {
	margin-top: 0em;
	margin-bottom: 0em;
}

.collapse.in {
	height: auto;
}

.block-body {
	margin: 1em;
	min-height: .25em;
}

.collapse {
	position: relative;
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

.stat-widget-container {
    text-align: center;
}

.stat-widget-container .stat-widget {
    width: 25%;
    float: left;
}

.stat-widget-container .stat-widget .stat-button .title {
	margin: 1em 0 0.15em;
    font-size: 2em;
    font-weight: bold;
    color: #999;
}

.stat-widget-container .stat-widget .stat-button .detail {
	margin: 0.15em 0 1em;
    font-size: 1.5em;
    color: #555;
}
</style>
</head>

<body>
	<div class="header">
		<h1>欢迎${session.loginUser.name }，登陆商城后台管理系统！</h1>
	</div>
	<ul class="breadcrumb">
		<li><a href="sys/welcome.jsp">首页</a> <span class="divider">/</span></li>
		<li class="active">欢迎登陆</li>
	</ul>
	<!-- 后台统计1 div -->
	<div class="block">
		<span class="block-heading" data-toggle="collapse">后台统计</span>
		<div id="page-stats" class="block-body collapse in">
			<div class="stat-widget-container">
				<div class="stat-widget">
					<div class="stat-button">
						<p class="title" id="userSize">0</p>
						<p class="detail">用户</p>
					</div>
				</div>

				<div class="stat-widget">
					<div class="stat-button">
						<p class="title" id="pendingOrders">0</p>
						<p class="detail">进行中订单</p>
					</div>
				</div>

				<div class="stat-widget">
					<div class="stat-button">
						<p class="title" id="completedOrders">0</p>
						<p class="detail">已完成订单</p>
					</div>
				</div>

				<div class="stat-widget">
					<div class="stat-button">
						<p class="title" id="completedMoney">$0</p>
						<p class="detail">完成总金额</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 后台统计2 div -->
	<div class="linetable" id="line" style="width: 80%;height:350px;margin:1.5em 10% 0 10%;"></div>
</body>
</html>
